<template>
	<div class="layout-padding-auto ">
		<el-form :model="state.queryForm" ref="queryRef" :inline="true">
			<el-form-item :label="$t('inputoutput.shiftCode')" prop="shiftCode">
				<el-select v-model="state.queryForm.shiftCode" placeholder="Select" style="width: 160px">
					<el-option v-for="item in shiftCodeOptions" :key="item.value" :label="item.label"
						:value="item.value" />
				</el-select>
			</el-form-item>

			<el-form-item :label="$t('inputoutput.consumeDate')" prop="consumeDate">
				<div class="block">
					<el-date-picker v-model="consumeDate" clearable type="daterange" unlink-panels range-separator="To"
						start-placeholder="Start date" end-placeholder="End date" :shortcuts="shortcuts" />
				</div>
			</el-form-item>

			<el-form-item :label="$t('inputoutput.processCode')" prop="processCode">
				<el-select v-model="state.queryForm.processCode" placeholder="Select" filterable style="width: 160px">
					<el-option v-for="item in processCodeOptions" :key="item.processCode" :label="item.processCode"
						:value="item.processCode" />
				</el-select>
			</el-form-item>

			<el-form-item :label="$t('inputoutput.consumeTime')" prop="consumeTime">
				<div class="block">
					<el-date-picker v-model="consumeTime" clearable type="daterange" unlink-panels range-separator="To"
						start-placeholder="Start date" end-placeholder="End date" :shortcuts="shortcuts" />
				</div>
			</el-form-item>

			<el-form-item>
				<el-button type="primary" icon="search" @click="query">{{ $t('so.query') }}</el-button>
				<el-button icon="refresh" @click="resetQuery">{{ $t('so.reset') }}</el-button>
			</el-form-item>

			<br />
			<div style="margin: -5px 0  10px 0">
				<span style="font-size: 14px;font-weight: 600;color: #303133">{{ $t('inputoutput.totalActualConsume') }}：{{ totalActualConsume||0 }}</span>
        <span style="font-size: 14px;font-weight: 600;color: #303133;margin-left: 105px">{{ $t('inputoutput.totalStandardConsume') }}：{{ totalStandardConsume||0 }}</span>
			</div>
		</el-form>
		<el-table :data="state.dataList" highlight-current-row v-loading="state.loading" border
			style="width: 100%; height: 100%" :cell-style="tableStyle.cellStyle" stripe
			:header-cell-style="tableStyle.headerCellStyle" ref="tableRef">
			<el-table-column type="index" label="#" width="80" />
			<el-table-column prop="processCode" :label="$t('inputoutput.processCode')" show-overflow-tooltip />
			<el-table-column prop="materialCode" :label="$t('inputoutput.materialCode')" show-overflow-tooltip
				width="120" />
			<el-table-column prop="materialName" :label="$t('inputoutput.materialName')" show-overflow-tooltip
				width="200" />
			<el-table-column prop="unit" :label="$t('inputoutput.unit')" show-overflow-tooltip />
			<el-table-column prop="lotNumber" :label="$t('inputoutput.batchNo')" show-overflow-tooltip width="180" />
			<el-table-column prop="outId" :label="$t('inputoutput.outputNo')" show-overflow-tooltip />
			<el-table-column prop="actualConsume" :label="$t('inputoutput.actualConsume')" show-overflow-tooltip
				width="100" />
			<el-table-column prop="standardConsume" :label="$t('inputoutput.standardConsume')" show-overflow-tooltip
				width="100">
				<template #default="scope">
					<el-tag type="success" effect="plain">
						{{ scope.row.standardConsume }}
					</el-tag>
				</template>
			</el-table-column>
			<el-table-column prop="consumeDate" :label="$t('inputoutput.consumeDate')" show-overflow-tooltip
				width="180" />
			<el-table-column prop="consumeTime" :label="$t('inputoutput.consumeTime')" show-overflow-tooltip
				width="180" />
			<el-table-column prop="shift" :label="$t('inputoutput.shiftCode')" show-overflow-tooltip width="150" />
			<el-table-column prop="consumeType" :label="$t('inputoutput.consumeType')" show-overflow-tooltip
				width="150" />
			<el-table-column prop="inputProductionLine" :label="$t('inputoutput.productionLineCode')"
				show-overflow-tooltip width="120" />
		</el-table>

		<pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" v-bind="state.pagination" />
	</div>
</template>
<script setup lang="ts">
import { BasicTableProps, useTable } from '/@/hooks/table';
import { reactive, ref } from 'vue';
import { TabsPaneContext } from 'element-plus';
import { getAllProcess, getConsumeRecord, GetConsumeRecordTotalQty } from '/@/api/platform/report/inputoutput';
import { useI18n } from 'vue-i18n';

const { t } = useI18n();
const totalActualConsume = ref();
const totalStandardConsume = ref();
const getYMD = (date: any) => {
	// 获取年份
	const year = date.getFullYear();

	// 获取月份，注意JavaScript中的月份是从0开始的，因此需要+1
	const month = String(date.getMonth() + 1).padStart(2, '0');

	// 获取日期
	const day = String(date.getDate()).padStart(2, '0');

	// 拼接成 yyyy-MM-dd 格式的字符串
	const formattedDate = `${year}-${month}-${day}`;

	return formattedDate;
};
const today = new Date();
const endDate = new Date(today);
endDate.setDate(today.getDate() - 6); // 今天之后的6天，总共一周
today.setDate(today.getDate() + 1);
const consumeDate = ref([endDate, today]);
const consumeTime = ref([endDate, today]);
// 搜索变量
const queryRef = ref();
const tableRef = ref();
const shortcuts = [
	{
		text: 'Last week',
		value: () => {
			const end = new Date();
			const start = new Date();
			start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
			return [start, end];
		},
	},
	{
		text: 'Last month',
		value: () => {
			const end = new Date();
			const start = new Date();
			start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
			return [start, end];
		},
	},
	{
		text: 'Last 3 months',
		value: () => {
			const end = new Date();
			const start = new Date();
			start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
			return [start, end];
		},
	},
];
const handleClick = (tab: TabsPaneContext, event: Event) => {
	console.log(tab, event)
}
//打印机列表
const processCodeOptions = ref();
// 初始化数据
onMounted(() => {
	getAllProcess({}).then((res) => {
		processCodeOptions.value = res.data;
	});
});
//早班晚班选项
const shiftCodeOptions = ref([
	{ label: 'All', value: '' },
	{ label: t("inputoutput.MorningShift"), value: 'MorningShift' },
	{ label: t("inputoutput.EveningShift"), value: 'EveningShift' },
]);
//表格的配置
const state: BasicTableProps = reactive<BasicTableProps>({
	queryForm: {
		StartDate: consumeDate.value ? getYMD(consumeDate.value[0]) : '',
		EndDate: consumeDate.value ? getYMD(consumeDate.value[1]) : '',
		StartTime: consumeTime.value ? getYMD(consumeTime.value[0]) : '',
		EndTime: consumeTime.value ? getYMD(consumeTime.value[1]) : '',
	},
	pageList: getConsumeRecord,
});
// 清空搜索条件
const resetQuery = () => {
	//清空下拉框
	state.queryForm.processCode = '';
	state.queryForm.shiftCode = '';
	consumeDate.value = [];
	consumeTime.value = [];

	state.queryForm.StartDate= '';
	state.queryForm.EndDate= '';
	state.queryForm.StartTime= '';
	state.queryForm.EndTime= '';
	getDataList(false);
	totalNum();
};
//搜索
const query = () => {
	state.queryForm.StartDate = consumeDate.value ? getYMD(consumeDate.value[0]) : '';
	state.queryForm.EndDate = consumeDate.value ? getYMD(consumeDate.value[1]) : '';
	state.queryForm.StartTime = consumeTime.value ? getYMD(consumeTime.value[0]) : '';
	state.queryForm.EndTime = consumeTime.value ? getYMD(consumeTime.value[1]) : '';
	totalNum();
	getDataList();
};
const { tableStyle, getDataList, sizeChangeHandle, currentChangeHandle, downBlobFile } = useTable(state);

// 汇总
const totalNum = () => {
	GetConsumeRecordTotalQty(state.queryForm).then((res) => {
		totalActualConsume.value = res.data.totalActualConsume;
		totalStandardConsume.value = res.data.totalStandardConsume;
	});
};
</script>
